<template>
  <div class="find-music-container">
    <!-- 顶部导航菜单 -->
    <el-menu :default-active="$route.path" mode="horizontal" router>
      <el-menu-item index="/find-music" route="/find-music">个性推荐</el-menu-item>
      <el-menu-item index="/find-music/song-group-all" route="/find-music/song-group-all">歌单</el-menu-item>
      <el-menu-item index="/find-music/ranking" route="/find-music/ranking">排行榜</el-menu-item>
      <!-- <el-menu-item index="5" route="">歌手</el-menu-item>
      <el-menu-item index="6" route="">最新音乐</el-menu-item> -->
    </el-menu>
    <!-- 子路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.el-menu--horizontal {
  .el-menu-item.is-active {
    border-bottom: 2px solid #ec4141;
  }
}
</style>
